<!--库存管理 -> 库存一览表-->
<template>
  <div>
    <el-form :inline="true">
      <el-form-item v-if="stockDto.roleType === '1'">
        <el-row>
          <el-col :span="12">
            <el-select v-model="stockDto.provinceCode" clearable placeholder="请选择省份" @click="getSelectProvince()"
                       @change="getSelectCity()">
              <el-option
                v-for="item in allSelectProvince"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select v-model="stockDto.cityCode" clearable placeholder="请选择城市" @change="onCityChange()">
              <el-option
                v-for="item in allSelectCity"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-if="stockDto.roleType === 2 && preOfficeType === '0'">
        <el-select v-model="stockDto.cityCode" placeholder="请选择地市" clearable @change="onCityChange()">
          <el-option
            v-for="item in addressOption"
            :key="item.code"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="stockDto.roleType === '1' || preOfficeType === '0'">
        <el-select v-model="stockDto.pointType" placeholder="请选择网点类型" @change="onPointTypeChange()" clearable>
          <el-option
            v-for="item1 in pointTypeOptions"
            :key="item1.id"
            :label="item1.name"
            :value="item1.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="stockDto.pointType === 0 && preOfficeType !== '1'">
        <el-select v-model="stockDto.pointId" placeholder="请选择网点" clearable>
          <el-option
            v-for="item1 in pointOptions"
            :key="item1.id"
            :label="item1.name"
            :value="item1.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="stockDto.pointType === 1 && preOutsourceType !=='0'">
        <el-select v-model="stockDto.pointId" placeholder="请选择外包商" clearable>
          <el-option
            v-for="item1 in outsourceOptions"
            :key="item1.id"
            :label="item1.company"
            :value="item1.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchDate()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-dropdown>
          <el-button type="primary">
            数据导出<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <a @click="excelExport(0)">精简导出</a>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-tooltip effect="light" content="完整导出包含了在厂数量统计，导出时间需要1~2分钟" placement="right">
                <a @click="excelExport(1)">完整导出</a>
              </el-tooltip>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
    </el-form>
    <el-table
      :data="stockList"
      :stripe="true"
      v-loading="tableLoadingFlag">
      <el-table-column
        prop="model"
        label="型号"
        width="150"
        align="center">
      </el-table-column>
      <el-table-column :label=headerTitle align="center" :render-header=renderHeader>
        <el-table-column label="备机" align="center">
          <el-table-column label="良品" align="center" prop="standbyGoodProductInStock">
          </el-table-column>
          <el-table-column label="不良品" align="center" prop="standbyBadProductInStock">
          </el-table-column>
          <el-table-column label="报废品" align="center" prop="standbyScrapProductInStock">
          </el-table-column>
        </el-table-column>
        <el-table-column label="客户机" align="center">
          <el-table-column label="良品" align="center" prop="clientGoodProductInStock">
          </el-table-column>
          <el-table-column label="不良品" align="center" prop="clientBadProductInStock">
          </el-table-column>
          <el-table-column label="报废品" align="center" prop="clientScrapProductInStock">
          </el-table-column>
        </el-table-column>
        <el-table-column label="合计" align="center" prop="stockSum">
        </el-table-column>
      </el-table-column>
      <el-table-column label="在途" align="center">
        <el-table-column label="返厂在途" align="center" prop="badProductOutStock">
        </el-table-column>
        <el-table-column label="工厂返还在途" align="center" prop="goodProductOutStock">
        </el-table-column>
        <el-table-column label="合计" align="center" prop="onRoadSum">
        </el-table-column>
      </el-table-column>
      <el-table-column label="利用率" align="center" prop="rate">
      </el-table-column>
      <el-table-column label="在工厂" align="center">
        <el-table-column label="X维修站" align="center" prop="xsFactoryNum">
        </el-table-column>
        <el-table-column label="L维修站" align="center" prop="lsFactoryNum">
        </el-table-column>
        <el-table-column label="M维修站" align="center" prop="msFactoryNum">
        </el-table-column>
        <el-table-column label="S维修站" align="center" prop="ssFactoryNum">
        </el-table-column>
        <el-table-column label="R维修站" align="center" prop="rsFactoryNum">
        </el-table-column>
        <el-table-column label="Z维修站" align="center" prop="zsFactoryNum">
        </el-table-column>
        <el-table-column label="E维修站" align="center" prop="esFactoryNum">
        </el-table-column>
        <el-table-column label="O维修站" align="center" prop="osFactoryNum">
        </el-table-column>
        <el-table-column label="J维修站" align="center" prop="jsFactoryNum">
        </el-table-column>
        <el-table-column label="F维修站" align="center" prop="fsFactoryNum">
        </el-table-column>
        <el-table-column label="友创" align="center" prop="ycFactoryNum">
        </el-table-column>
        <el-table-column label="征铭科" align="center" prop="zmkFactoryNum">
        </el-table-column>
        <el-table-column label="重庆-友商" align="center" prop="cqysFactoryNum">
        </el-table-column>
        <el-table-column label="四川专用- R深圳维修站" align="center" prop="scFactoryNum">
        </el-table-column>
        <el-table-column label="在厂总数" align="center" prop="totalInFactory">
        </el-table-column>
      </el-table-column>
    </el-table>
    <pagination :pagination="pagination">
    </pagination>
  </div>
</template>

<script>
  import {apiGetStockList, apiExport} from '@/api/stock/index'
  import {
    apiGetModelList,
    apiGetCityListByProvinceCode,
    apiGetCity,
    apiGetAllPointOffice
  } from '@/api/dictionary'
  import {apiGetOutsourcerList} from '@/api/basic/info/outsourcer'
  import {apiGetOfficeList} from '@/api/basic/info/inside/office'
  import {getRoleType, getOfficeType, getCityCode, getProvinceCode, getOutsourceType} from '@/utils/token'
  import Pagination from '@/components/Pagination'
  import {downloadExcel} from "../../utils";

  export default {
    components: {
      Pagination
    },
    created () {
      this.preOutsourceType = getOutsourceType()
      this.preOfficeType = getOfficeType()
      let listQuery = {
        roleType: getRoleType(),
        pageNumber: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      }
      if (getRoleType() === '2') {
        this.stockDto.roleType = 2
        this.stockDto.provinceCode = getProvinceCode()
        listQuery.province = getProvinceCode()
        if (getOfficeType() === '1') {
          listQuery.city = getCityCode()
          this.stockDto.cityCode = getCityCode()
        }
        this.selectedAddressInit()
      }
      if (getRoleType() === '3') {
        this.stockDto.roleType = 3
        this.stockDto.pointType = 1
        this.stockDto.provinceCode = getProvinceCode()
        if (getOutsourceType() === '0') {
          this.stockDto.cityCode = getCityCode()
        }
        this.selectedAddressInit()
      }
      this.getStockList(listQuery)
      this.headerTitleInit()
      this.getSelectProvince()
      this.getOffice()
      this.getOutsource()
    },
    data () {
      return {
        tableLoadingFlag: false,          // 库存一览表
        headerTitle: '在网点总量', // 表示在网点数量的动态表头
        renderHeaderFlag: true, // 表头渲染标志量，为true时对表头进行自定义渲染
        pagination: this.getData(this.getStockList),
        stockList: [],
        addressOption: [],
        preOfficeType: null,
        preOutsourceType: null,
        stockDto: {
          provinceCode: '',
          cityCode: '',
          pointType: '',
          pointId: '',
          roleType: getRoleType()
        },
        pointTypeOptions: [
          {
            'id': 0,
            'name': '办事处'
          },
          {
            'id': 1,
            'name': '外包商'
          }
        ],
        // 网点一览
        pointOptions: [],
        // 外包商一览
        outsourceOptions: [],
        allSelectProvince: [],
        allSelectCity: []
      }
    },
    methods: {
      excelExport (exportType) {
        let paramsPost = {
          // 库存一览表导出类型（0： 精简导出；1：完整导出<包含各型号在厂数量>）
          exportType: 0,
          province: this.stockDto.provinceCode,
          city: this.stockDto.cityCode,
          pointType: this.stockDto.pointType,
          pointId: this.stockDto.pointId,
          roleType: getRoleType()
        }
        paramsPost.exportType = exportType
        this.tableLoadingFlag = true
        this.$message({
          type: 'warning',
          message: '导出时间较长，请耐心等待'
        })
        apiExport(paramsPost).then(response => {
          this.tableLoadingFlag = false
          let excelName
          if (paramsPost.exportType === 0) {
            excelName = '自有售后库存一览表信息精简导出表'
          } else {
            excelName = '自有售后库存一览表信息完整导出表'
          }
          downloadExcel(response.data, excelName)
        }).catch(() => {
          this.tableLoadingFlag = false
          console.log('error')
        })
      },
      // 表头初始化
      headerTitleInit () {
        if (this.stockDto.roleType === 3) {
          this.headerTitle = '在外包商'
          this.renderHeaderFlag = false
        }
      },
      // 地址初始化
      selectedAddressInit () {
        let listquery = {
          province: getProvinceCode()
        }
        apiGetCityListByProvinceCode(listquery).then(response => {
          let cityList = response.data
          let city = []
          let temp = {}
          for (let i in cityList) {
            if (!temp[cityList[i].name]) {
              temp[cityList[i].name] = cityList[i].code
            }
          }
          city.push({'name': '全部地市', 'code': ''})
          for (let k in temp) {
            city.push({'name': k, 'code': temp[k]})
          }
          this.addressOption = city
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      // 型号选择初始化
      selectedModelInit () {
        apiGetModelList().then(response => {
          let modelList = response.data
          let model = []
          let temp = {}
          for (let i in modelList) {
            if (!temp[modelList[i].code]) {
              temp[modelList[i].code] = modelList[i].id
            }
          }
          model.push({'code': '全部型号', 'value': ''})
          for (let k in temp) {
            model.push({'code': k, 'id': temp[k]})
          }
          this.modelOptions = model
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      // 为在网点总量列添加说明
      renderHeader (h, {column, $index}) {
        if (this.renderHeaderFlag) {
          return [
            column.label,
            h(
              'el-tooltip',
              {
                props: {
                  content: '办事处 + 外包商 = 网点总量',
                  placement: 'top'
                }
              },
              [
                h('span', {
                  class: {'el-icon-question': true}
                })
              ]
            )
          ]
        } else {
          return [column.label]
        }
      },
      // 条件查询
      searchDate () {
        let listQuery = {
          province: this.stockDto.provinceCode,
          city: this.stockDto.cityCode,
          pointType: this.stockDto.pointType,
          pointId: this.stockDto.pointId,
          pageNumber: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          roleType: getRoleType()
        }
        if (getRoleType() === '2') {
          listQuery.province = getProvinceCode()
        }
        this.stockList = []
        this.pagination.totalRecords = 0
        this.getStockList(listQuery)
      },
      getStockList (listQuery) {
        listQuery = {
          province: this.stockDto.provinceCode,
          city: this.stockDto.cityCode,
          pointType: this.stockDto.pointType,
          pointId: this.stockDto.pointId,
          pageNumber: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          roleType: getRoleType()
        }
        if (undefined === listQuery.province) {
          if (this.stockDto.provinceCode === '') {
            if (getRoleType() === '2') {
              listQuery.province = getProvinceCode()
              if (getOfficeType() === '1') {
                listQuery.city = getCityCode()
              }
            }
          }
        }
        if (undefined !== listQuery.pageNum) {
          listQuery.pageNumber = listQuery.pageNum
        }
        // TODO 获取库存一览表
        this.tableLoadingFlag = true
        listQuery.roleType = getRoleType()
        apiGetStockList(listQuery).then(response => {
          this.stockList = response.data
          this.pagination.totalRecords = response.totalRecords
          this.tableLoadingFlag = false
        }).catch(() => {
          this.tableLoadingFlag = false
        })
      },
      getSelectCity () {
        this.stockDto.cityCode = ''
        if (this.stockDto.provinceCode === '') {
          this.allSelectCity = []
        } else {
          if (this.stockDto.pointType === 0) {
            let listQuery = {
              province: this.stockDto.provinceCode,
              city: ''
            }
            this.pointOptions = []
            this.getOfficeByCity(listQuery)
          } else {
            let listQuery = {
              provinceCode: this.stockDto.provinceCode
            }
            this.outsourceOptions = []
            this.getOutsourceByCity(listQuery)
          }
          let listQuery = {
            province: this.stockDto.provinceCode,
            city: ''
          }
          apiGetCity(listQuery).then(response => {
            this.allSelectCity = response.data
          })
        }
      },
      onPointTypeChange () {
        this.pointOptions = []
        this.outsourceOptions = []
        if (this.stockDto.pointType === 0) {
          let listQuery = {
            province: this.stockDto.provinceCode,
            city: this.stockDto.cityCode
          }
          this.getOfficeByCity(listQuery)
        } else {
          let listQuery = {
            provinceCode: this.stockDto.provinceCode,
            cityCode: this.stockDto.cityCode
          }
          this.getOutsourceByCity(listQuery)
        }
        // 切换网点类型的同时，对表头进行切换
        if (this.stockDto.pointType === 0) {
          this.headerTitle = '在办事处'
          this.renderHeaderFlag = false
        } else if (this.stockDto.pointType === 1) {
          this.headerTitle = '在外包商'
          this.renderHeaderFlag = false
        } else {
          this.headerTitle = '在网点总量'
          this.renderHeaderFlag = true
        }
      },
      // 地区筛选条件改变
      onCityChange () {
        if (this.stockDto.pointType === 0) {
          let listQuery = {
            province: this.stockDto.provinceCode,
            city: this.stockDto.cityCode
          }
          this.pointOptions = []
          this.getOfficeByCity(listQuery)
        } else {
          let listQuery = {
            provinceCode: this.stockDto.provinceCode,
            cityCode: this.stockDto.cityCode
          }
          this.outsourceOptions = []
          this.getOutsourceByCity(listQuery)
        }
      },
      // 省份初始化
      getSelectProvince () {
        apiGetCity().then(response => {
          this.allSelectProvince = response.data
        })
      },
      // 外包商初始化
      getOutsource () {
        let listQuery = {
          provinceCode: this.stockDto.provinceCode,
          pageNumber: 1,
          pageSize: 100
        }
        apiGetOutsourcerList(listQuery).then(response => {
          this.outsourceOptions = response.data
        })
      },
      // 网点初始化
      getOffice () {
        let listQuery = {
          provinceCode: this.stockDto.provinceCode,
          pageNumber: 1,
          pageSize: 100
        }
        apiGetOfficeList(listQuery).then(response => {
          this.pointOptions = response.data
        })
      },
      // 按地区获取外包商
      getOutsourceByCity (listQuery) {
        this.stockDto.pointId = ''
        listQuery.pageNumber = 1
        listQuery.pageSize = 100
        apiGetOutsourcerList(listQuery).then(response => {
          this.outsourceOptions = response.data
        })
      },
      // 按地区条件获取网点
      getOfficeByCity (listQuery) {
        this.stockDto.pointId = ''
        apiGetAllPointOffice(listQuery).then(response => {
          this.pointOptions = response.data
        })
      }
    }
  }
</script>
